<template>
  <div>
    <el-card>
      <el-row type="flex" justify="end" class="btn_box">
        <el-button
          @click="add_station"
          class="el-icon-plus"
          type="success"
          size="mini"
        >&nbsp;&nbsp;添加站点</el-button>

        <el-button
          @click="add_camera(form_camera)"
          class="el-icon-plus"
          type="success"
          size="mini"
        >&nbsp;&nbsp;添加摄像头</el-button>
      </el-row>
      <el-table :data="tableData" stripe border style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="info">
            <el-tooltip
              class="item"
              effect="dark"
              :enterable="false"
              content="查看与用户绑定关系"
              placement="top"
            >
              <el-button size="mini" @click="bind_user(info.row.id)" type="info" plain>绑定关系(用户)</el-button>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              :enterable="false"
              content="查看与网关绑定关系"
              placement="top"
            >
              <el-button size="mini" @click="bind_gateway(info.row.id)" type="info" plain>绑定关系(网关)</el-button>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              :enterable="false"
              content="查看本站点下气象站"
              placement="top"
            >
              <el-button size="mini" @click="more_(info.row.id)" type="info" plain>气象站</el-button>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              :enterable="false"
              content="查看本站点下摄像头"
              placement="top"
            >
              <el-button size="mini" @click="check_camera(info.row.id)" type="info" plain>摄像头</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="站点名称"></el-table-column>
        <el-table-column prop="contact" label="联系人"></el-table-column>
        <el-table-column prop="mobile" label="手机"></el-table-column>
        <el-table-column prop="fixed" label="座机"></el-table-column>
        <el-table-column prop="lng" label="经度"></el-table-column>
        <el-table-column prop="lat" label="纬度"></el-table-column>
        <el-table-column prop="createDate" label="创建时间" width="`200"></el-table-column>
        <el-table-column prop label="操作" width="250">
          <template slot-scope="info">
            <el-row type="flex">
              <el-tooltip
                class="item"
                effect="dark"
                :enterable="false"
                content="编辑"
                placement="top"
              >
                <el-button @click="station_up(info.row)" type="primary" icon="el-icon-edit" circle></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :enterable="false"
                content="删除"
                placement="top"
              >
                <el-button
                  @click="station_delete(info.row.id)"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                ></el-button>
              </el-tooltip>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 编辑站点信息 -->
    <el-dialog title="站点信息" :visible.sync="dialog_station_up" width="50%" @close="clear_form">
      <!-- <span>这是一段信息</span> -->
      <el-form ref="form_station_up" :model="form_station_up" label-width="80px">
        <el-form-item label="站点名称">
          <el-input v-model="form_station_up.name"></el-input>
        </el-form-item>

        <el-form-item label="联系人">
          <el-input v-model="form_station_up.contact"></el-input>
        </el-form-item>
        <el-form-item label="手机">
          <el-input v-model="form_station_up.mobile"></el-input>
        </el-form-item>
        <el-form-item label="座机">
          <el-input v-model="form_station_up.fixed"></el-input>
        </el-form-item>
        <el-form-item label="经度">
          <el-input v-model="form_station_up.lng"></el-input>
        </el-form-item>
        <el-form-item label="纬度">
          <el-input v-model="form_station_up.lat"></el-input>
        </el-form-item>
        <el-row type="flex" justify="end">
          <el-button @click="dialog_map_open(form_station_up)">查看地图</el-button>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog_station_up = false">取 消</el-button>
        <el-button type="primary" @click="station_up_s">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹出某站点下气象站的信息 -->
    <el-dialog title="气象站信息" :visible.sync="diaolg_weather_list" width="70%">
      <el-row type="flex" justify="end" class="btn_box">
        <el-button
          @click="add_weather"
          class="el-icon-plus"
          type="success"
          size="mini"
        >&nbsp;&nbsp;添加气象站</el-button>
      </el-row>
      <el-table :data="tableData_weather" stripe border style="width: 100%">
        <el-table-column prop="name" label="气象站名称"></el-table-column>

        <el-table-column prop="flags" label="气象站状态">
          <template slot-scope="info">
            <el-tag :type="info.row.tag">{{info.row.flags }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="lng" label="经度"></el-table-column>
        <el-table-column prop="lat" label="纬度"></el-table-column>
        <el-table-column prop="battery" label="剩余电量(%)"></el-table-column>
        <el-table-column prop="voltage" label="电压(V)"></el-table-column>
        <el-table-column prop label="操作" width="150">
          <template slot-scope="info2">
            <el-button
              size="mini"
              @click="up_weather(info2.row)"
              type="primary"
              icon="el-icon-edit"
              circle
            ></el-button>
            <el-button
              size="mini"
              @click="detele_weather(info2.row.id)"
              type="danger"
              icon="el-icon-delete"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 地图 -->
    <el-dialog
      @close="init_map"
      class="map_class_"
      title="地图"
      :visible.sync="dialog_map"
      width="50%"
    >
      <p class="lng_lat"></p>
      <!-- <div
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        id="container"
      ></div>-->
      <div v-if="r_lock">
        <map1
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          @lng_lat="lng_lat"
          :map_obj="map_obj"
        ></map1>
      </div>
    </el-dialog>

    <!-- 添加站点信息 -->
    <!-- 气象站弹框 -->
    <el-dialog @close="weather_close" title="编辑信息" :visible.sync="diaolg_weather_up">
      <el-form ref="form_weather_up" :model="form_weather_up" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="form_weather_up.name"></el-input>
        </el-form-item>

        <el-form-item label="经度">
          <el-input v-model="form_weather_up.lng"></el-input>
        </el-form-item>
        <el-form-item label="纬度">
          <el-input v-model="form_weather_up.lat"></el-input>
        </el-form-item>
        <!-- <el-form-item label="电量">
          <el-input v-model="form_weather_up.battery"></el-input>
        </el-form-item>
        <el-form-item label="电压">
          <el-input v-model="form_weather_up.voltage"></el-input>
        </el-form-item>-->
        <el-form-item v-if="add_weather_lock" label="序列号">
          <el-input v-model="form_weather_up.serial"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <!-- <el-input v-model="form_weather_up.flags"></el-input> -->
          <el-select v-model="form_weather_up.flag" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="100px" label="封面(气象站)">
          <el-upload
            class="avatar-uploader"
            action="http://192.168.1.201:8080/file/upload"
            :show-file-list="false"
            :on-change="up_change"
            :headers="headers"
          >
            <img
              v-if="form_weather_up.icon"
              :src="form_weather_up.icon"
              class="avatar"
              alt="封面未正常加载"
              title="点击切换封面"
            >
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-row type="flex" justify="end">
          <el-button @click="dialog_map_open">查看地图</el-button>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="diaolg_weather_up = false">取 消</el-button>
        <el-button type="primary" @click="up_date_a">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 具有绑定关系的用户列表 -->
    <el-dialog title="用户绑定列表" :visible.sync="diaolg_bind_user" width>
      <el-table :data="station_bind_user" stripe border style="width: 100%">
        <el-table-column prop="username" label="用户名称"></el-table-column>
        <el-table-column prop label="操作">
          <template slot-scope="info_usid">
            <el-button
              @click="relieve_bind(info_usid.row.usId)"
              type="info"
              size="mini"
              plain
            >解除绑定关系</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 具有绑定关系的网关列表 -->
    <el-dialog title="网关绑定列表" :visible.sync="diaolg_bind_gateway" width>
      <el-table :data="bind_gateway_list" stripe border style="width: 100%">
        <el-table-column prop="name" label="网关名称"></el-table-column>
        <el-table-column prop label="操作">
          <template slot-scope="info_usid">
            <el-button
              @click="relieve_bind_g(info_usid.row.id)"
              type="info"
              size="mini"
              plain
            >解除绑定关系</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 摄像头弹出框 -->
    <el-dialog title="摄像头" :visible.sync="dialog_camera" width="80%">
      <el-table :data="camera_list" stripe border style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="info">
            <el-button @click="up_camera(info.row)" size="mini" type="primary" plain>编辑</el-button>
            <el-button @click="delect_camera(info.row.id)" size="mini" type="danger" plain>删除</el-button>
          </template>
        </el-table-column>

        <el-table-column prop="name" label="摄像头名称"></el-table-column>
        <el-table-column prop="isJifeiCamera" label="是否极飞">
          <template slot-scope="info">
            <el-tag
              :type="info.row.isJifeiCamera?'success':'info'"
            >{{ info.row.isJifeiCamera?'是':'否' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="account" label="极飞摄像头账号">
          <template slot-scope="info">
            <div v-if="info.row.isJifeiCamera">{{info.row.account}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="secret" label="极飞身份信息"></el-table-column>

        <el-table-column prop="lng" label="经度"></el-table-column>
        <el-table-column prop="lat" label="纬度"></el-table-column>

        <el-table-column prop="serial" label="摄像头序列号"></el-table-column>
        <el-table-column prop="clientId" label="clientId"></el-table-column>
        <!-- <el-table-column prop label="操作">
          <template slot-scope="info">
            <el-button @click="up_camera(info.row)" size="mini" type="primary" plain>编辑</el-button>
            <el-button @click="delect_camera(info.row.id)" size="mini" type="danger" plain>删除</el-button>
          </template>
        </el-table-column>-->
      </el-table>
    </el-dialog>
    <!-- 编辑摄像头弹出框 -->
    <el-dialog @close="close_up_camera" title="编辑" :visible.sync="dialog_up_camera" width="60%">
      <el-form ref="form_camera" :model="form_camera" :rules="rules" label-width="100px">
        <el-form-item label="摄像头名称">
          <el-input v-model="form_camera.name"></el-input>
        </el-form-item>
        <el-form-item label="经度">
          <el-input v-model="form_camera.lng"></el-input>
        </el-form-item>
        <el-form-item label="纬度">
          <el-input v-model="form_camera.lat"></el-input>
        </el-form-item>
        <el-form-item label="视频地址">
          <el-input v-model="form_camera.playUrl"></el-input>
        </el-form-item>
        <el-form-item label="摄像头序列号">
          <el-input v-model="form_camera.serial"></el-input>
        </el-form-item>
        <el-form-item label="极飞身份验证">
          <el-input v-model="form_camera.secret"></el-input>
        </el-form-item>
        <el-form-item label="所属站点">
          <el-select v-model="form_camera.sId" clearable placeholder="请选择">
            <el-option v-for="item in tableData" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <template v-if="isJifeiCamera_lock">
          <el-form-item label="新密码" prop="pass">
            <el-input type="password" show-password v-model="form_camera.pass"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" show-password v-model="form_camera.checkPass"></el-input>
          </el-form-item>
        </template>
        <el-form-item label prop>
          <el-button
            v-if="form_camera.isJifeiCamera"
            type="info"
            size="mini"
            @click="pwd_sure"
            plain
          >修改密码</el-button>
        </el-form-item>
        <el-row type="flex" justify="end">
          <el-button @click="dialog_map_open(form_camera)">查看地图</el-button>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog_up_camera = false">取 消</el-button>
        <el-button type="primary" @click="camera_up_s">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import map from "./map";
// <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值">
export default {
  components: {
    map1: map
  },
  created() {
    this.one_data();
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.form_camera.checkPass !== "") {
          this.$refs.form_camera.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form_camera.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      r_lock: true,
      tableData: [],
      // 编辑站点信息(弹出框弹出关键)
      dialog_station_up: false,
      // 编辑框的表单
      form_station_up: {},
      add_lock: false,
      // 气象站列表弹出框
      diaolg_weather_list: false,
      // 气象站列表
      tableData_weather: [],
      // 气象站弹框
      diaolg_weather_up: false,
      // 气象站编辑表单
      form_weather_up: {},
      // token
      headers: {
        token: window.sessionStorage.getItem("token")
      },
      // 点击more的站点id
      station_id: 0,
      // 共用一个表单的锁
      add_weather_lock: false,
      // 气象站状态
      options: [
        { value: "00", label: "离线" },
        { value: "01", label: "在线" },
        { value: "02", label: "报警" }
      ],
      //  与点击的站点有 绑定关系的用户信息
      station_bind_user: [],
      // 解绑用户弹框
      diaolg_bind_user: false,
      // 地图开关
      dialog_map: false,
      // 地图加载
      loading: true,
      // 共用地图锁
      map_lock: false,
      // 传输到map的经纬度
      map_obj: {},
      // 摄像头列表要用的数据
      camera_list: [],
      // 摄像头弹出框的锁
      dialog_camera: false,
      // 编辑摄像头表单
      form_camera: {},
      // 摄像头地图开关
      camera_map_lock: false,
      // 摄像头 添加开关
      add_camera_lock: false,
      // 编辑摄像头弹出框
      dialog_up_camera: false,
      // 是否弹出修改密码选项
      isJifeiCamera_lock: false,
      // 密码一致规则
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }]
      },
      // 网关绑定列表
      diaolg_bind_gateway: false,
      // 该站点下的网关绑定关系列表
      bind_gateway_list: []
    };
  },
  watch: {
    menuTree() {
      //  ++this.menuKey
    }
  },
  methods: {
    // 点击解除站点 与 该网关的绑定关系
    async relieve_bind_g(id) {
      this.$confirm("此操作将解除与该网关的绑定, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
          let { data: res } = await this.$http(`/gateWay/release/${id}`);
          if (!this.msg(res)) return;
          this.bind_gateway(this.station_id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
      // console.log(res);
    },
    // 点击查看 站点下绑定的网关
    async bind_gateway(sId) {
      this.station_id = sId;
      let { data: res } = await this.$http(`/gateWay/listBySId/${sId}`);
      this.diaolg_bind_gateway = true;
      this.bind_gateway_list = res.datas;
      // console.log(this.bind_gateway_list);
    },
    // 点击删除摄像头
    delect_camera(id) {
      this.$confirm("此操作将永久删除该摄像头, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
          let { data: res } = await this.$http.delete(`/camera/delete/${id}`);
          if (!this.msg(res)) return;
          this.check_camera(this.station_id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 点击添加摄像头
    add_camera() {
      this.add_camera_lock = true;
      this.up_camera(this.form_camera);
    },
    // 点击确认 要显示 修改密码的选项
    pwd_sure() {
      this.isJifeiCamera_lock = !this.isJifeiCamera_lock;
    },
    // 确定提交编辑后的摄像头信息
    async camera_up_s() {
      this.$refs.form_camera.validate(async valid => {
        if (valid || !this.isJifeiCamera_lock) {
          var url = "/camera/update";
          if (this.add_camera_lock) {
            url = "/camera/add";
          }
          let { data: res } = await this.$http.put(url, this.form_camera);
          if (!this.msg(res)) return;
          this.dialog_up_camera = false;
          this.check_camera(this.station_id);
        }
      });
    },
    // 编辑摄像头 关闭时 地图还给网关
    close_up_camera() {
      this.isJifeiCamera_lock = false;
      this.camera_map_lock = false;
      this.form_camera = {};
      this.add_camera_lock = false;
    },
    // 点击弹出编辑摄像头
    up_camera(obj) {
      this.camera_map_lock = true;
      this.form_camera = obj;
      this.dialog_up_camera = true;
    },
    // 获取站点下所有摄像头
    async check_camera(sId) {
      this.station_id = sId;
      let { data: res } = await this.$http(`/camera/listBySid/${sId}`);
      this.camera_list = res.datas;
      this.dialog_camera = true;
      // this.loading  = false
    },

    // 初始化地图 清除marker标
    init_map() {
      this.r_lock = false;
    },
    // map传来的经纬度
    lng_lat(e) {
      if (!e.lng) {
        e.lng = 0;
        e.lat = 0;
      }

      //
      var form_ = this.form_station_up;

      if (this.map_lock) {
        form_ = this.form_weather_up;
      }
      if (this.camera_map_lock) {
        form_ = this.form_camera;
      }
      form_.lng = e.lng;
      form_.lat = e.lat;

      // 点击时候做一个提示p标签
      document.querySelector(".lng_lat").innerHTML = `已选择 经度：${
        e.lng
      },纬度：${e.lat}`;
    },
    async weather_close() {
      this.more_(this.station_id);
      this.map_lock = false;
      this.form_weather_up = {};
    },
    // 点击选择经纬度 地图初始化
    dialog_map_open(e) {
      // e = {};
      var _this = this;
      this.r_lock = true;

      this.dialog_map = true;
      this.map_obj = e;
      setTimeout(() => {
        this.lng_lat(e);

        this.loading = false;
      }, 1000);
    },
    // 点击解除绑定关系
    async relieve_bind(usId) {
      this.$confirm("此操作将此用户与站点解除绑定关系, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      })
        .then(async () => {
          let { data: res } = await this.$http.delete(
            `/userStation/delete/${usId}`
          );
          if (!this.msg(res)) return;
          this.bind_user(this.station_id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    // 查看绑定关系按钮
    async bind_user(sId) {
      let { data: res } = await this.$http(
        `/userStation/listUserInfoBySId/${sId}`
      );
      if (res.status != 0) return this.$message.warning("该站点尚未绑定用户");
      this.station_bind_user = res.datas;
      this.station_id = sId;
      this.diaolg_bind_user = true;
    },
    // 手机号正则验证
    checkPhone(phone) {
      // var phone = document.getElementById("phone").value;
      if (!/^1[3456789]\d{9}$/.test(phone)) {
        // alert("手机号码有误，请重填");
        this.$message.error("手机号码有误，请重填");
        return false;
      } else {
        return true;
      }
    },
    // 关闭气象站时的清除表单
    close_weather() {
      // 每次编辑完都 清空表单 ，为添加操作准备
      this.form_weather_up = {};
      // 清除添加气象站状态
      this.add_weather_lock = false;
    },
    // 添加气象站
    async add_weather() {
      // 更改表单为 添加状态
      this.add_weather_lock = true;
      // 默认添加在当前 站点下
      this.form_weather_up.sId = this.station_id;
      // 打开弹出层
      this.diaolg_weather_up = true;
      // 开启气象站状态
      this.map_lock = true;
    },
    // 删除气象站
    detele_weather(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let { data: res } = await this.$http.delete(
            `/collectorSingle/delete/${id}`
          );
          // this.one_data();
          this.more_(this.station_id);

          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 点击气象站弹出框的确认按钮(发送ajax)
    async up_date_a() {
      // 编辑和添加通用一个弹出层
      var url = "/collectorSingle/update";
      // 点击添加气象站的时候 锁是为true的
      if (this.add_weather_lock) {
        // 更改路由地址 为添加气象站
        url = "/collectorSingle/add";
      }
      // 验证经纬度
      if (!this.lat_90_lng_180(this.form_weather_up)) return;
      // 发送请求
      var { data: res } = await this.$http.put(url, this.form_weather_up);
      // 弹出 请求结果
      if (res.status != 0) return this.$message.error("编辑失败");
      if (res.status == 0) this.$message.success("编辑成功");
      // 获取最新数据
      this.more_(this.station_id);
      // 关闭弹出层
      this.diaolg_weather_up = false;
    },
    up_change(a) {
      setTimeout(() => {
        this.imgurl = a.response.data.path;
        this.form_weather_up.icon = this.imgurl;
        this.form_weather_up = { ...this.form_weather_up };
      }, 1000);
    },
    // 点击弹出修改气象站弹窗
    up_weather(obj) {
      this.form_weather_up = obj;
      this.diaolg_weather_up = true;
      this.map_lock = true;
    },
    // 点击弹出该站点下的 子站信息
    async more_(id) {
      this.station_id = id;
      let { data: res } = await this.$http(
        `/collectorSingle/listCSBySId/${id}`
      );
      this.tableData_weather = res.datas;
      this.diaolg_weather_list = true;
      this.tableData_weather.forEach(item => {
        if (item.flag == "00") {
          item.flags = "离线";
          item.tag = "info";
        } else if (item.flag == "01") {
          item.flags = "在线";
          item.tag = "success";
        } else {
          item.flags = "报警";
          item.tag = "danger";
        }
      });
    },
    // 添加站点按钮

    add_station() {
      this.dialog_station_up = true;
      this.add_lock = true;
    },
    clear_form() {
      this.one_data();
      this.form_station_up = {};
      this.dialog_station_up = false;
      this.add_lock = false;
    },
    // 点击删除某一站点
    async station_delete(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          let { data: res } = await this.$http.delete(`/station/delete/${id}`);
          this.one_data();

          //
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 一个弹出提示信息的方法
    msg(res) {
      if (res.status == 0) {
        this.$message.success(res.msg);
        return true;
      } else {
        this.$message.error(res.msg);
        // window.location.reload();
        return false;
      }
    },
    // 验证经纬度方法
    lat_90_lng_180(obj) {
      if (obj.lat > 90 || obj.lat < -90 || obj.lng > 180 || obj.lng < -180) {
        this.$message.error("请正确填写经纬度");
        return false;
      } else {
        return true;
      }
    },
    // 确认提交编辑后的站点信息发送ajax
    async station_up_s() {
      // 编辑和提交用的都是同一个表单，弹出框 默认 接口地址是提交接口
      var url = "/station/update";
      // 在点击添加按钮的时候 add_lock为true 改变变量的值 发松添加请求
      if (this.add_lock) {
        url = "/station/add";
      }
      // 判断手机号是否合法
      if (!this.checkPhone(this.form_station_up.mobile)) return;
      // 发松之前判断编辑的经纬度是否在合适的范围内
      if (!this.lat_90_lng_180(this.form_station_up)) return;
      // 最后 发送请求
      let { data: res } = await this.$http.put(url, this.form_station_up);
      // 更新最新数据
      this.one_data();
      // 弹出更改结果
      if (!this.msg(res)) return;
      // 关闭弹出框
      this.dialog_station_up = false;
    },
    // 编辑站点信息
    station_up(obj) {
      this.form_station_up = obj;

      // 打开弹出框
      this.dialog_station_up = true;
    },
    // 首屏站点信息
    async one_data() {
      let { data: res } = await this.$http("/station/list");
      this.tableData = res.datas;
    }
  }
};
</script>

<style lang='less' scoped>
#container {
  width: 100%;
  height: 280px;
}
.btn_box {
  padding-right: 50px;
}

.el-table {
  margin-top: 20px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
